<template>
    <div 
        class="app-container">
        <h1 style="font-size: 50px;font-family:'Courier New', Courier, monospace;">{{'欢迎你！'+user.name}}</h1>
        <el-descriptions :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                {{user.no}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{user.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    性别
                </template>
                <el-tag :type="user.sex === '1' ? 'primary' : 'danger'" disable-transitions><i
                        :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>{{user.sex==1?"男":"女"}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
                <el-tag type="success"
                    disable-transitions>{{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"用户")}}</el-tag>

            </el-descriptions-item>
        </el-descriptions>
        <DateUtils ></DateUtils>
        <div class="total-layout">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_order" class="total-icon">
                        <div class="total-title">今日订单总数</div>
                        <div class="total-value">200</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_today_amount" class="total-icon">
                        <div class="total-title">今日销售总额</div>
                        <div class="total-value">￥5000.00</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_yesterday_amount" class="total-icon">
                        <div class="total-title">昨日销售总额</div>
                        <div class="total-value">￥5000.00</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <img :src="img_home_yesterday_amount" class="total-icon">
                        <div class="total-title">近7天销售总额</div>
                        <div class="total-value">￥50000.00</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="overview-layout">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">商品总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">400</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">50</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">500</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">已下架</el-col>
                                <el-col :span="6" class="overview-item-title">已上架</el-col>
                                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                                <el-col :span="6" class="overview-item-title">全部商品</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">用户总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">200</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">1000</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">5000</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                                <el-col :span="6" class="overview-item-title">会员总数</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>

</template>

<script>
    import DateUtils from "./DateUtils";
    import { str2Date } from '@/utils/date';
    import img_home_order from '@/assets/images/home_order.png';
    import img_home_today_amount from '@/assets/images/home_today_amount.png';
    import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
    const DATA_FROM_BACKEND = {
        columns: ['date', 'orderCount', 'orderAmount'],
        rows: [
            { date: '2023-02-01', orderCount: 10, orderAmount: 1093 },
            { date: '2023-02-02', orderCount: 20, orderAmount: 2230 },
            { date: '2023-02-03', orderCount: 33, orderAmount: 3623 },
            { date: '2023-02-04', orderCount: 50, orderAmount: 6423 },
            { date: '2023-02-05', orderCount: 80, orderAmount: 8492 },
            { date: '2023-02-06', orderCount: 60, orderAmount: 6293 },
            { date: '2023-02-07', orderCount: 20, orderAmount: 2293 },
            { date: '2023-02-08', orderCount: 60, orderAmount: 6293 },
            { date: '2023-02-09', orderCount: 50, orderAmount: 5293 },
            { date: '2023-02-10', orderCount: 30, orderAmount: 3293 },
            { date: '2023-02-11', orderCount: 20, orderAmount: 2293 },
            { date: '2023-02-12', orderCount: 80, orderAmount: 8293 },
            { date: '2023-02-13', orderCount: 100, orderAmount: 10293 },
            { date: '2023-02-14', orderCount: 10, orderAmount: 1293 },
            { date: '2023-02-15', orderCount: 40, orderAmount: 4293 }
        ]
    };
    export default {
        name: "Home",
        components: {DateUtils},
        data() {

            return {
                user:{},
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            let start = new Date();
                            start.setFullYear(2023);
                            start.setMonth(1);
                            start.setDate(5);
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一月',
                        onClick(picker) {
                            const end = new Date();
                            let start = new Date();
                            start.setFullYear(2023);
                            start.setMonth(1);
                            start.setDate(1);
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                orderCountDate: '',
                chartSettings: {
                    xAxisType: 'time',
                    area: true,
                    axisSite: { right: ['orderAmount'] },
                    labelMap: { 'orderCount': '订单数量', 'orderAmount': '订单金额' }
                },
                chartData: {
                    columns: [],
                    rows: []
                },
                loading: false,
                dataEmpty: false,
                img_home_order,
                img_home_today_amount,
                img_home_yesterday_amount
            }
        },
        computed:{

        },
        methods:{
            init(){
                this.user = JSON.parse(sessionStorage.getItem('CurUser'))
            },
            handleDateChange() {
                this.getData();
            },
            initOrderCountDate() {
                let start = new Date();
                start.setFullYear(2023);
                start.setMonth(1);
                start.setDate(1);
                const end = new Date();
                end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
                this.orderCountDate = [start, end];
            },
            getData() {
                setTimeout(() => {
                    this.chartData = {
                        columns: ['date', 'orderCount', 'orderAmount'],
                        rows: []
                    };
                    for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) {
                        let item = DATA_FROM_BACKEND.rows[i];
                        let currDate = str2Date(item.date);
                        let start = this.orderCountDate[0];
                        let end = this.orderCountDate[1];
                        if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
                            this.chartData.rows.push(item);
                        }
                    }
                    this.dataEmpty = false;
                    this.loading = false
                }, 1000)
            }
        },
        created(){
            this.init(),
            this.initOrderCountDate();
            this.getData();
        }
    }
</script>

<style scoped>
    .el-descriptions{
        width:90%;

        margin: 0 auto;
        text-align: center;
    }
   .app-container {
       margin-top: 40px;
       margin-left: 120px;
       margin-right: 120px;
       height: 100%;
   } 
   .address-layout {} 
   .total-layout {
       margin-top: 20px;
   } 
   .total-frame {
       border: 1px solid #DCDFE6;
       padding: 20px;
       height: 100px;
   } 
   .total-icon {
       color: #409EFF;
       width: 60px;
       height: 60px;
   } 
   .total-title {
       position: relative;
       font-size: 16px;
       color: #909399;
       left: 70px;
       top: -50px;
   } 
   .total-value {
       position: relative;
       font-size: 18px;
       color: #606266;
       left: 70px;
       top: -40px;
   } 
   .un-handle-layout {
       margin-top: 20px;
       border: 1px solid #DCDFE6;
   } 
   .layout-title {
       color: #606266;
       padding: 15px 20px;
       background: #F2F6FC;
       font-weight: bold;
   } 
   .un-handle-content {
       padding: 20px 40px;
   } 
   .un-handle-item {
       border-bottom: 1px solid #EBEEF5;
       padding: 10px;
   } 
   .overview-layout {
       margin-top: 20px;
   } 
   .overview-item-value {
       font-size: 24px;
       text-align: center;
   } 
   .overview-item-title {
       margin-top: 10px;
       text-align: center;
   } 
   .out-border {
       border: 1px solid #DCDFE6;
   } 
   .statistics-layout {
       margin-top: 20px;
       border: 1px solid #DCDFE6;
   } 
   .mine-layout {
       position: absolute;
       right: 140px;
       top: 107px;
       width: 250px;
       height: 235px;
   } 
   .address-content {
       padding: 20px;
       font-size: 18px
   }
</style>